<template>
  <el-dialog v-model="addOrEditVisible" title="权限管理" :before-close="closeEditDialog" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-row>
        <el-col :span="24">
          <el-form-item label="权限名称" prop="authorityName">
            <el-input v-model="ruleForm.authorityName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="权限标识" prop="authority">
            <el-input v-model="ruleForm.authority" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="父权限" prop="parentId">
            <!--  -->
            <el-cascader v-model="ruleForm.parentId" :options="parentPermits" :props="parentPermitsProps" style="width: 100%;"
              :show-all-levels="false" placeholder="请选择父类权限" @change="parentPermitChange" filterable clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="排序" prop="sortFlag">
            <el-input-number v-model="ruleForm.sortFlag" :min="1" :max="20"  style="width: 100%;"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单简介" prop="permitIntro">
            <el-input v-model="ruleForm.permitIntro" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeEditDialog">关闭</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, toRef, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus";
import { Permit } from "@/apis/model/system/PermitModel";
import { insertPermit, permitLoop, updatePermit } from '@/apis/http/system/PermitHttp';

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: Permit,
  addDataType: string
}


// 刷新list页面
const refushList = ref(false);
// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

const parentPermits = ref([] as Array<Permit>)
const parentPermitsProps = {
  expandTrigger: 'click',
  multiple: false,
  value: 'id',
  label: 'authorityName',
  children: 'children',
  checkStrictly: true,
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  authorityName: [
    { required: true, message: '请输入权限名称', trigger: 'blur' }
  ],
  authority: [
    { required: true, message: '请输入权限标识', trigger: 'blur' }
  ],
  sortFlag: [
    { required: true, message: '请输入排序', trigger: 'blur' }
  ],
  permitIntro: [
    { required: true, message: '请输入简介', trigger: 'blur' }
  ],
  remark: [
    { required: true, message: '请输入备注', trigger: 'blur' }
  ],
})

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}

/**
 * 获取数据
 * @param value json类型的数据
 */
const parentPermitChange = (value: any) => {
  if (value == null){
    props.ruleForm.parentId = -1;
    return;
  }

  for (var i = 0; i < 10; i++) {
    if (value[i] == undefined) {
      props.ruleForm.parentId = value[i - 1]
      break;
    }
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertPermit(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '添加数据成功',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          }
        })
      } else if (props.addDataType === 'edit') {
        updatePermit(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新数据成功',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          }
        })
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(() => {
  permitLoop().then(res => {
    const code = res.code
    const message = res.message
    const data = res.data as Array<Permit>
    if (code == 200) {
      parentPermits.value = data;
    }
  });
})
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-select {
  width: 100%;
}
</style>
